<template>
  <div class="task-page">
    <div class="grow-card">
      <n-tabs default-value="成长任务" type="line">
        <n-tab-pane name="成长任务" tab="成长任务"></n-tab-pane>
      </n-tabs>
      <div class="list">
        <div class="item" v-for="item in growthList" :key="item.id">
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="more">
              <div class="tag">
                <span v-if="item.getType === 'VIP'">VIP会员</span>
                <span v-else>牛牛币</span>
                <span class="text-red">+{{ item.getAward }}</span>
              </div>
              <div class="tag">
                <span>完成 {{ item.finishSum }}/{{ item.needCount }}</span>
              </div>
            </div>
          </div>
          <template
            v-if="
              ['FIRST_UPLOAD', 'UPLOAD', 'RECOMMEND'].includes(item.finishType)
            "
          >
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去上传
            </n-button>
          </template>
          <template v-else-if="item.finishType === 'SHARE'">
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去分享
            </n-button>
          </template>
          <template v-else-if="item.finishType === 'FIRST_COLLECT'">
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去创建
            </n-button>
          </template>
        </div>
      </div>
    </div>
    <div class="ads hover-shadow">
      <img src="@/assets/sucai/task/ad.png" alt="" />
    </div>
    <div class="grow-card niuniu">
      <n-tabs default-value="牛牛币任务" type="line">
        <n-tab-pane name="牛牛币任务" tab="牛牛币任务"></n-tab-pane>
      </n-tabs>
      <div class="list">
        <div class="item" v-for="item in goldList" :key="item.id">
          <div class="info">
            <div class="name">{{ item.name }}</div>
            <div class="more">
              <div class="tag">
                <span v-if="item.getType === 'VIP'">VIP会员</span>
                <span v-else>牛牛币</span>
                <span class="text-red">+{{ item.getAward }}</span>
              </div>
              <div class="tag">
                <span>完成 {{ item.finishSum }}/{{ item.needCount }}</span>
              </div>
            </div>
          </div>
          <template
            v-if="
              ['FIRST_UPLOAD', 'UPLOAD', 'RECOMMEND'].includes(item.finishType)
            "
          >
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去上传
            </n-button>
          </template>
          <template v-else-if="item.finishType === 'SHARE'">
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去分享
            </n-button>
          </template>
          <template v-else-if="item.finishType === 'FIRST_COLLECT'">
            <n-button
              class="go-btn"
              type="primary"
              round
              ghost
              @click="handGo(item)"
            >
              去创建
            </n-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { NTabPane, NTabs, NButton, useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import { useAppsStore } from '@/stores/modules/app'
import { storeToRefs } from 'pinia'
import loginApi from '@/service/api/login'
const router: any = useRouter()
const useStore = useAppsStore()
const toast = useMessage()
const { getUserInfo: userInfo } = storeToRefs(useStore)

interface itemState {
  id: number
  name: string
  getType: 'VIP' | 'GOLD'
  finishType:
    | 'FIRST_UPLOAD'
    | 'UPLOAD'
    | 'SHARE'
    | 'FIRST_COLLECT'
    | 'RECOMMEND'
  getAward: number
  needCount: number
  finishSum: number
  oneCategoryId: number
}
const goldList = ref<itemState[]>([])
const growthList = ref<itemState[]>([])
const authRef = ref()
const handGo = async (e: itemState) => {
  if (['FIRST_UPLOAD', 'UPLOAD'].includes(e.finishType)) {
    router.push({
      path: '/user/publish',
      query: {
        oneCategoryId: e.oneCategoryId,
        taskId: e.id
      }
    })
  } else if (e.finishType === 'RECOMMEND') {
    //  跳转上传页面
    if (!userInfo.value.isCertification) {
      const { data } = await loginApi.getAuth()
      if (data) {
        if (data.auditStatus === 'AUDIT') {
          toast.warning('实名认证审核中，请耐心等待')
          return
        } else if (data.auditStatus === 'REJECT') {
          toast.error(data.rejectCause)
          authRef.value.open(data)
          return
        }
      }
      authRef.value.open()
      return
    }
    router.push('/user/publish')
  } else if (e.finishType === 'SHARE') {
    //  跳转分享页面
    router.push('/convention')
  } else if (e.finishType === 'FIRST_COLLECT') {
    //  跳转收藏页面
    router.push('/user/coll')
  }
}
const init = async () => {
  goldList.value = [
    {
      id: 1,
      name: '任务1',
      getType: 'VIP',
      finishType: 'FIRST_UPLOAD',
      getAward: 10,
      needCount: 0,
      finishSum: 1,
      oneCategoryId: 1
    },
    {
      id: 2,
      name: '任务2',
      getType: 'GOLD',
      getAward: 10,
      finishSum: 0,
      needCount: 1,
      finishType: 'SHARE',
      oneCategoryId: 1
    }
  ]
  growthList.value = [
    {
      id: 3,
      name: '任务1',
      getType: 'VIP',
      getAward: 10,
      finishSum: 0,
      needCount: 1,
      finishType: 'FIRST_UPLOAD',
      oneCategoryId: 1
    },
    {
      id: 3,
      name: '任务2',
      getType: 'GOLD',
      getAward: 10,
      finishSum: 0,
      needCount: 1,
      finishType: 'SHARE',
      oneCategoryId: 1
    }
  ]
}
init()
</script>

<style scoped lang="scss">
.task-page {
  .grow-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eeeeee;
    box-sizing: border-box;
    padding: 15px 24px 64px 24px;
    .list {
      margin-top: 39px;
      gap: 47px 98px;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 295px;
        display: flex;
        .info {
          flex: 1;
          margin-right: 20px;
          .name {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
          .more {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 5px;
            .tag {
              font-size: 14px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #999999;
              .text-red {
                color: #f1423d;
              }
            }
          }
        }
        .go-btn {
          width: 82px;
          height: 30px;
          font-size: 14px;
        }
      }
    }
  }
  .niuniu {
    margin-top: 15px;
  }
  .ads {
    margin-top: 15px;
    cursor: pointer;
    img {
      width: 100%;
      height: 183px;
    }
  }
}
</style>
